import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import PropTypes from 'prop-types';
import moment from 'moment';
import TabTitle from '@/components/TabTitle/TabTitle';
import History from './components/History'


@inject('rootStore') @observer
class HistoryList extends Component {
  @observable tabKey = 1;
  @observable filterParam = {
    title: '',
    publisher: '',
    startTime: '',
    endTime: ''
  }
  @observable categoryActiveItem = ""
  @observable categoryStatus = true
  @observable canFetch = true

  state = {
    timeValue: [],
  }

  componentDidMount() {
    document.getElementsByClassName('ant-layout-content')[0].scrollTop = 0

    this.toGetList();
    this.toGetCategory();
  }

  toGetList = () => {
    const advertisementStore = this.props.rootStore.advertisementStore;

    advertisementStore.toChangeListStatus(4);
  }

  toGetCategory = () => {
    const advertisementStore = this.props.rootStore.advertisementStore;
    if (!advertisementStore.adCategorySuccess) {
      advertisementStore.toGetAdsCategory();
    }
  }

  toChooseCategory = (name, id) => {
    const advertisementStore = this.props.rootStore.advertisementStore;
    this.categoryActiveItem = name;
    advertisementStore.toChangeCategoryFilter(name, id)
  }

  toChangeCategoryStatus = () => {
    this.categoryStatus = !this.categoryStatus
  }

  tabsOnChange = (key) => {
    const advertisementStore = this.props.rootStore.advertisementStore;
    const { history } = this.props;

    this.filterParam.title = '';
    this.filterParam.press = '';
    this.filterParam.startTime = '';
    this.filterParam.endTime = '';
    this.categoryActiveItem = ""

    this.setState({
      timeValue: []
    })

    history.push(`/advertisement/list/${key}`)
    setTimeout(() => {
      advertisementStore.toChangeListStatus(key);
    }, 600)
  }

  filterBarSearch = () => {
    const advertisementStore = this.props.rootStore.advertisementStore;
    advertisementStore.filterParamSearch(this.filterParam);
  }

  titleValueOnChange = (e) => {
    this.filterParam.title = e.target.value;
  }

  timeOnChange = (value) => {
    this.filterParam.startTime = moment(value[0]).format();
    this.filterParam.endTime = moment(value[1]).format();
  }

  timeChange = (value, dateString) => {
    this.setState({
      timeValue: value
    })
  }

  publisherValueOnChange = (e) => {
    this.filterParam.publisher = e.target.value
  }

  filterBarReset = () => {
    const advertisementStore = this.props.rootStore.advertisementStore;
    this.filterParam.title = '';
    this.filterParam.press = '';
    this.filterParam.startTime = '';
    this.filterParam.endTime = '';
    this.categoryActiveItem = ""

    this.setState({
      timeValue: []
    })

    advertisementStore.filterParamSearch(this.filterParam);
  }

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  render() {
    const advertisementStore = this.props.rootStore.advertisementStore;
    const breadCrumb = ['Advertisement', 'Advertisement List']

    return (
      <div className="news-list">
        <TabTitle
          showTabbar={true}
          title="Advertisement History"
          breadCrumb={breadCrumb} />
        <History
          {...this.props}
          filterBarSearch={this.filterBarSearch}
          titleValueOnChange={this.titleValueOnChange}
          titleValue={this.filterParam.title}
          timeOnChange={this.timeOnChange}
          timeChange={this.timeChange}
          timeValue={this.state.timeValue}
          publisherValue={this.filterParam.publisher}
          publisherValueOnChange={this.publisherValueOnChange}
          filterBarReset={this.filterBarReset}
          categoryListFifty={advertisementStore.adCategoryList}
          toChooseCategory={(name, id) => this.toChooseCategory(name, id)}
          activeItem={this.categoryActiveItem}
          categoryStatus={this.categoryStatus}
          toChangeCategoryStatus={this.toChangeCategoryStatus} />
      </div>
    );
  }
}

export default HistoryList;
